<template>
  <div class="recommendation">
    <scroll class="content">
      <circle-item v-for="item in publishData" :key="item.articleId" :article="item"></circle-item>
    </scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll.vue'
import {getBlog} from '@/network/publish'
import CircleItem from './CircleItem.vue'

export default {
  name: 'recommendation',
  data() {
    return {
      publishData: []
    }
  },

  computed:{
    // ...mapState(['publishData'])
  },
  components: {
     Scroll,
     CircleItem,
  },
  mounted() {
    this.getPublishData()
  },
  methods: {
    async getPublishData() {
      const { data:{data:{data:res}} }  =  await getBlog()
      this.publishData = res
      console.log(this.publishData);
    },
    toBlogDetail(item) {
      this.$router.push({
        path:'/blogDetail',
        query:item
      })
    }
  },
}
</script>

<style scoped>

/* 设置展示区样式 */
.recommendation {
 width: 100%;
 height: 100%;
 overflow: hidden;
}
  /* 滚动区域 */
.content {
  background-color: #E3EDF7;
  z-index: 999;
  overflow: hidden;
  position: absolute;
  top: 84px;
  bottom: 42px;
  left: 0;
  right: 0;
}


</style>